<template>
    <div class="card-container">
        <el-card v-for="(teacherAll, index) in teacherAllList" :key="index" class="box-card">
            <el-avatar shape="square" :size="150" :src="'http://localhost:8080/upload/' + teacherAll.tavatar" />
            <div>{{ "编号" + '&nbsp;&nbsp;&nbsp;&nbsp;' + teacherAll.tno }}</div>
            <div>{{ "姓名" + '&nbsp;&nbsp;&nbsp;&nbsp;' + teacherAll.tname }}</div>
            <div>{{ "年龄" + '&nbsp;&nbsp;&nbsp;&nbsp;' + teacherAll.tage }}</div>
            <div>{{ "好感度 " + '&nbsp;&nbsp;&nbsp;&nbsp;' + teacherAll.tpoint }}</div>
            <div style="color: red; font-size: 25px;">{{ "教授课程" + '&nbsp;&nbsp;&nbsp;&nbsp;' + teacherAll.course.cname
                }}</div>
            <div>{{ "开课时间" + '&nbsp;&nbsp;&nbsp;&nbsp;' + teacherAll.course.ctime }}</div>
            <div>{{ "课时" + '&nbsp;&nbsp;&nbsp;&nbsp;' + teacherAll.course.cperiod }}</div>
            <div style="margin-top: 10px;">
                <el-button type="primary" size="large" round v-if="selectedCourses.includes(teacherAll.tid)"
                    @click="insertCourse(teacherAll.tid)" disabled>预约</el-button>

                <el-button type="primary" round v-else @click="insertCourse(teacherAll.tid)" class="pulse-button">预约</el-button>

                <el-popconfirm title="你确认要取消嘛" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                    @confirm="deleteCourse(teacherAll.tid)">
                    <template #reference>
                        <el-button type="danger" round @click="console.log(teacherAll.tid)">取消</el-button>
                    </template>
                </el-popconfirm>
            </div>
        </el-card>
    </div>

</template>

<script setup>
import studentOpreateApi from '@/api/studentOpreateApi ';
import { ref } from 'vue';
import { ElLoading, ElMessage } from 'element-plus';
import anime from 'animejs';

const teacherAllList = ref([]);


const studentInfo = ref("")//查询学生个人信息里的id,用在下边insert与delete里
const studentInformation = ref('')//学生个人信息
const selectedCourses = ref([]); // 存储已选老师的ID


function selectStudent() {
    studentOpreateApi.studentLoginInfo()
        .then(resp => {
            console.log(resp.data);
            studentInfo.value = resp.data.sid;
            studentInformation.value = resp.data;
            studentOpreateApi.selectedTeacherAndCourse(studentInformation.value.sno)
                .then(resp => {
                    console.log(resp.data[0].teachs.map(teachs => teachs.tid));
                    selectedCourses.value = resp.data[0].teachs.map(teachs => teachs.tid)
                    //console.log(selectedCourses.value);    
                })

        })
}
selectStudent()


//添加课程
function insertCourse(tid) {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    studentOpreateApi.insertSidAndTid(studentInfo.value, tid)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage.success(resp.msg)
                //刷新表格
                selectStudent()
                teacherAndCourseAll()
            } else {
                //弹出消息
                loading.close()
                ElMessage.error(resp.msg)
            }
        })

}
//删除课程
function deleteCourse(tid) {
    console.log(tid);
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    studentOpreateApi.deleteSidAndTidBySidAndTid(studentInfo.value, tid)
        .then(resp => {
            console.log(studentInfo.value);
            console.log(tid);
            console.log(resp);
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage.success(resp.msg)
                //刷新表格
                selectStudent()
                teacherAndCourseAll()
            } else {
                //弹出消息
                loading.close()
                ElMessage.error(resp.msg)
            }
        })
}

function teacherAndCourseAll() {
    studentOpreateApi.selectAllTeacherAndCourse()
        .then(resp => {
            console.log(resp.data);
            teacherAllList.value = resp.data
        })
}
teacherAndCourseAll()

</script>

<style scoped>
.box-card {
    width: 320px;
    margin-bottom: 25px;
}

.low-stock {
    color: red;
}

.card-container {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    width: 100%;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.pulse-button {
    animation: pulse 0.6s infinite;
}
</style>
